<template>
	<view class="content">
		<view class="store-top">
			<view class="store-name">
				店铺名称
				<image src="http://q79q98ocd.bkt.clouddn.com/backs.png"></image>
				<view class="btns">
					<image src="http://q79q98ocd.bkt.clouddn.com/diandian.png" class="dian"></image>
					<view class="lines"></view>
					<image src="http://q79q98ocd.bkt.clouddn.com/close.png" class="close" @click="toPro()"></image>
				</view>
				<view class="store-sum">
					粉丝
					<text>30</text>
					订单数
					<text>210</text>
					店铺评分
					<text class="grade">4.5</text>
				</view>
			</view>		
		</view>
		<view class="menu">
			<view class="store-nav">
				<uni-search-bar  :radius="100" placeholder="搜索" @confirm="search" class="inputs"></uni-search-bar>
				<xyzTab :tabList="tabList" :tabActiveIdx="tabActiveIdx" :size="'26upx'"></xyzTab>			
			</view>
			<view class="menuList">
				<view class="menuLists" v-for="(item,key) in menusList" :key="key">
					<image :src="item.img"></image>
					<view class="brief">
						<view class="organic">{{item.txt}}</view>
						<view class="price">{{item.price}}<image :src="item.pic"><text class="adress">{{item.add}}</text></image></view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="foot"  v-for="(item,items) in footList" :key="items" @click="getUrl(item.url)">
				<image :src="item.img"></image>
				<view :style="item.txt=='首页'?'color:#55C47D':''">{{item.txt}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '../../../components/uni-search-bar/uni-search-bar.vue'
	import xyzTab from '@/components/xyz-tab/xyz-tab.vue'
	export default {
		components:{
			uniSearchBar,
			xyzTab
		},
		data() {
			return {
				tabList: [
					{id: 0,label: '首页'},
					{id: 1,label: '供应(0)'},
				],
				tabActiveIdx: 0,
				menusList:[
					{img: '/static/img/store-one.png',txt: '纯正有机娃娃菜',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '临沂'},
					{img: '/static/img/store-two.png',txt: '烟台红富士',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '烟台'},
					{img: '/static/img/store-three.png',txt: '临沂小米煎饼',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '临沂'},
					{img: '/static/img/store-four.png',txt: '海南芒果',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '海南'},
					{img: '/static/img/store-one.png',txt: '纯正有机娃娃菜',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '临沂'},
					{img: '/static/img/store-two.png',txt: '烟台红富士',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '烟台'},
					{img: '/static/img/store-three.png',txt: '临沂小米煎饼',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '临沂'},
					{img: '/static/img/store-four.png',txt: '海南芒果',price: '￥75.6',pic: 'http://q79q98ocd.bkt.clouddn.com/adress.png',add: '海南'},
				],
				footList:[
					{img:'/static/img/pro-indexactive.png',txt: '首页',url:'storeguanli'},
					{img:'/static/img/pto-jieshao.png',txt: '商家介绍',url:'provider'},
					{img:'/static/img/pro-shezhi.png',txt: '商家设置',url:'storeset'}
				]
			}
		},
		methods: {
			getUrl(url){
				console.log(url);
				uni.navigateTo({
					url:url
				})
			},
			toPro(){
				uni.reLaunch({
					url: '../products'
				});
			},
			search(){
				
			},
			tabSelect(){
				
			}
			
		},
	}
</script>

<style lang="scss">
.content{
	background-color: #F6F5F8;
	color: #333;
	.store-top{
		margin-top: 63upx;
		background-image: url("http://q79q98ocd.bkt.clouddn.com/grassses.png");
		width: calc(100% - 60upx);
		height: 160upx;	
		box-shadow: 10upx 4upx 20upx 0upx rgba(55,121,0,0.3);
		padding:30upx;
		overflow: hidden;	
		.store-name{
			font-size:32upx;
			font-weight:400;
			color:#fff;
			overflow: hidden;
			image{
				width: 16upx;
				height: 30upx;
				padding-left: 15upx;
				vertical-align: middle;
				padding-bottom: 4upx;
			}
		}
		.btns{
			width:160upx;
			height:60upx;
			background:rgba(0,0,0,1);
			border:1upx solid rgba(85,196,125,1);
			opacity:0.4;
			border-radius:30upx;
			text-align: center;
			float: right;
			position: relative;
			display: flex;
			justify-content: space-between;
			.dian{
				width: 42upx;
				height: 10upx;
				position: absolute;
				left: 6upx;
				top: 24upx;
			}
			.lines{
				width:2upx;
				height:28upx;
				background:rgba(183,182,182,1);
				position: absolute;
				left: 88upx;
				top: 15upx;
			}
			.close{
				width: 20upx;
				height: 21upx;
				position: absolute;
				left: 105upx;
				top: 20upx;
			}
		}
	 .store-sum{
			margin-top: 30upx;
			width:420upx;
			height:34upx;
			line-height: 34upx;
			background:rgba(255,255,255,1);
			opacity:0.74;
			border-radius:17px;
			color: #333;
			font-size: 26upx;
			padding: 0 15upx;
			display: flex;
			justify-content: space-between;
			text{
				font-size: 24upx;
				color: #F40E0E;
			}
			.grade{
				color: #55C47D;
			}		}
	}
	.menu{		
		.store-nav{
			display: flex;
			flex-wrap: nowrap;
			.inputs{
				width: 160upx;
				font-size: 26upx;
			}
			.index{
				padding: 16upx;
				font-size: 26upx;
				// text{
				// 	padding-bottom: 16upx;
				// 	background: navigator-hover;	
				// }
			}
		}
		.menuList{
			width: calc(100% - 60upx);
			padding: 0 30upx;
			display: flex;
			justify-content:space-between;
			flex-wrap: wrap;
			height: 500upx;
			.menuLists{
				width: 335upx;
				background-color: #fff;
				margin-bottom: 20upx;
				box-shadow: 0upx 4upx 5upx 5upx rgba(55,55,55,0.1);
				border-radius: 15upx;
				image{				
					width: 335upx;
					height: 280upx;
					 border-radius: 15upx 15upx 0upx 0upx;
					display: block;  //图片下面的1px
				}
				.brief{
					padding: 13upx 13upx 30upx 13upx;
					.organic{
						font-size: 32upx;
						line-height: 50upx;
					}
					.price{
						font-size: 28upx;
						color: #F40E0E;
						display: flex;
						flex-wrap: nowrap;
						image{
							width: 19upx;
							height: 25upx;
							padding: 5upx 7upx 0 50upx;
						}
						.adress{
							font-size: 24upx;
							color: #999;
						}
					}
				}
			}
		}
	}
	.footer{
		width: 100%;
		height: 100upx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		.foot{
			width: 33.3%;
			text-align: center;
			font-size: 24upx;
			padding-top: 10upx;
			image{
				width: 42upx;
				height: 40upx;
			}
		}
	}
}
</style>
